<?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use admin\assets\LoginAsset;
use yii\captcha\Captcha;

$asset = LoginAsset::register($this);
$this->title = '登录';
?>
<html lang="zh">
     <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <?php echo Html::csrfMetaTags(); ?>
        <title><?php echo Html::encode($this->title); ?>-后台管理</title>
        <script type="text/javascript" src="<?php echo Yii::$app->homeUrl; ?>js/jquery-2.1.1.min.js"></script>
        <?php $this->head() ?>
    </head>
    <form role="form">
        <fieldset>
            <div class="form-group">
                <input class="form-control" placeholder="请输入用户名" name="username" type="text" autofocus>
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="请输入密码" name="password" type="password">
            </div>
            <div class="form-group">
                <input class="form-control" style="width: 226px; display: inline-block;" placeholder="请输入验证码" name="captcha" type="text">
                <!--验证码输出，调用Captcha类下的widget方法，需传入必要的配置信息，name属性必须要传入，captchaAction属性指定是哪个控制器下的哪个方法，site/captcha就是上文我们在SiteController的actions中定义的验证码
                方法（其实在SiteCOntroller中的actions定义的，可以不添加该项，因为默认是SiteController，如果是在其他控制器中定义的，则必须添加该项）。imageOptions可以制定一些html标签属性属性，template指定模板，
                这里只输出img标签，故只用了{image}-->
                <?= Captcha::widget(['name' => 'captcha-img', 'captchaAction' => 'site/captcha', 'imageOptions' => ['id' => 'captcha-img', 'title' => '换一个', 'style' => 'cursor:pointer;'], 'template' => '{image}']); ?>
            </div>
            <div class="checkbox">
                <label>
                    <input name="remember" type="checkbox" value="1">记住我
                </label>
            </div>
            <!-- Change this to a button or input when using this as a form -->
            <a href="" class="btn btn-lg btn-success btn-block">登录</a>
        </fieldset>
    </form>
</html>
<script>
    $(function () {
    //解决验证码不刷新的问题
    changeVerifyCode();
    $('#captcha-img').click(function () {
        changeVerifyCode();
    });
});
//更改或者重新加载验证码
function changeVerifyCode() {
//项目URL
    var adminUrl = $('#admin-url').val();
    
    $.ajax({
    //使用ajax请求site/captcha方法，加上refresh参数，接口返回json数据
        url: "/site/captcha?refresh",
        dataType: 'json',
        cache: false,
        success: function (data) {
        //将验证码图片中的图片地址更换
            $("#captcha-img").attr('src', data['url']);
        }
    });
}
</script>
